<!--
 * @Author: fanyoubang
 * @Date: 2021-02-23 08:54:12
 * @LastEditTime: 2021-04-15 18:19:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \newxine:\xj-house\src\xjwDesign\xjw-swiper\index.vue
-->
<template>
  <view class="xjw-swiper">
    <swiper
      @animationfinish="change"
      :interval="interval"
      :autoplay="autoplay"
      :duration="duration"
      :vertical="vertical"
      :current="current"
      :style="{ height: height + 'rpx' }"
    >
      <swiper-item
        class="xjw-swiper-item"
        v-for="(item, index) in swiperList"
        :key="index"
      >
        <block v-if="item.tag == 'video'">
          <view class="video-content">
            <view
              class="video-content-mask"
              @tap="videoPlay"
              v-if="!isActiveVideo"
            ></view>
            <video
              :src="item.url"
              @touchmove.stop.prevent="() => {}"
              v-if="current == index"
              @play="isActiveVideo = true"
              @pause="videoPauseCallback"
              @ended="videoEndCallback"
              :enable-play-gesture="true"
              id="videoRef"
              controls
            ></video>
          </view>
        </block>
        <block v-else>
          <view class="xjw-list-image-wrap" @click="toPage(item)">
            <image
              :style="{ borderRadius: `${borderRadius}rpx` }"
              class="xjw-swiper_image"
              :src="item[urlKey] + '?x-oss-process=style/water_mid'"
              :mode="imgMode"
            ></image>
            <view class="vr-contetn" v-if="item.type === 'VR视频'">
              <view class="vr-contetn_icon iconfont xjw-vr"> </view>
              <view class="vr-contetn_title">VR视频 </view>
            </view>
          </view>
        </block>
      </swiper-item>
    </swiper>
    <view
      v-if="showIndicator && !isActiveVideo"
      class="xjw-swiper-indicator"
      :style="{ justifyContent: justifyContent }"
    >
      <view class="xjw-indicator-item_number">
        <i class="iconfont xjw-tupian"></i>{{ current + 1 }}/{{
          swiperList.length
        }}</view
      >
    </view>
    <view class="xjw-swiper-active-type" v-if="showIndicator && !isActiveVideo">
      <view
        class="xjw-swiper-active-type_item"
        v-for="(item, index) in activeType"
        :key="index"
        @click="setActiveInde(index)"
        :class="{
          'xjw-swiper-active-type_item--actvie': index == activedIndex,
        }"
        >{{ item }}</view
      >
    </view>
  </view>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import { Component, Prop, Watch } from "vue-property-decorator";

interface LoopItem {
  url: string;
  type: string;
  tag: string;
}
interface ListItem {
  type: string;
  list: Array<LoopItem>;
}

@Component
export default class Index extends Vue {
  @Prop({ type: Array as PropType<Array<ListItem>> }) list;
  // 是否自动播放 (默认不自动播放)
  @Prop({ type: Boolean, default: false }) autoplay;
  // 自动切换时间间隔
  @Prop({ type: Number, default: 5000 }) interval;
  // 是否采用衔接滑动，即播放到末尾后重新回到开头
  @Prop({ type: Boolean, default: false }) circular;
  // 滑动动画时长
  @Prop({ type: Number, default: 500 }) duration;
  // 滑动方向是否为纵向
  @Prop({ type: Boolean, default: false }) vertical;
  // 高度
  @Prop({ type: Number, default: 488 }) height;
  // 圆角值
  @Prop({ type: Number, default: 8 }) borderRadius;
  // 图片裁切模式
  @Prop({ type: String, default: "aspectFill" }) imgMode;
  // 从list数组中读取的图片的属性名
  @Prop({ type: String, default: "url" }) urlKey;
  // 是否显示指示器
  @Prop({ type: Boolean, default: true }) showIndicator;
  // 指示器的位置，left|center|right
  @Prop({ type: String, default: "right" }) indicatorPos;
  // 是否显示轮播类型
  @Prop({ type: Boolean, default: true }) showActiveType;
  get justifyContent() {
    let justifyContent: string = "";
    if (this.indicatorPos === "left") {
      justifyContent = "flex-start";
    }
    if (this.indicatorPos === "center") {
      justifyContent = "center";
    }
    if (this.indicatorPos === "right") {
      justifyContent = "flex-end";
    }
    return justifyContent;
  }
  /**
   * flat不兼容 腾讯pc浏览器
   */
  forFlat: any = (arr = [], depth = 1) => {
    const result = [];
    (function flat(arr, depth) {
      for (const item of arr) {
        if (Array.isArray(item) && depth > 0) {
          flat(item, depth - 1);
        } else {
          // 去除空元素，添加非undefined元素（使用void 0比使用undefined能够减少3个字节）
          item !== void 0 && result.push(item);
        }
      }
    })(arr, depth);
    return result;
  };
  get swiperList() {
    let list = this.list.map((item) => item.list);
    list = this.forFlat(list);
    return list;
  }
  get activeType() {
    return this.list.map((item) => item.type);
  }
  current: number = 0;
  activedIndex: number = 0;
  isActiveVideo = false; //是否正在播放 false 没有播放

  change(e: any) {
    const current: number = e.detail.current;
    this.current = current;
    const type: string = this.swiperList[current].type;
    this.activedIndex = this.list.findIndex((item) => item.type === type);
  }
  setActiveInde(index: number) {
    this.activedIndex = index;
    const type: string = this.activeType[index];
    this.current = this.swiperList.findIndex((item) => item.type === type);
  }
  toPage(item) {
    if (item.type == "VR视频") {
      uni.navigateTo({
        url:
          `/pages/webView/webView?encode=true&url=` +
          encodeURIComponent(item.vrUrl),
      });
    } else if (item.type == "图片") {
      const list = this.list.find((v) => {
        return v.type == "图片";
      });
      uni.navigateTo({
        url:
          "/pages/houseDetail/swiperMedia?mediaList=" +
          encodeURIComponent(JSON.stringify(list.list)) +
          "&all=" +
          encodeURIComponent(JSON.stringify(this.list)),
      });
    } else if (item.type == "户型图") {
      const list = this.list.find((v) => {
        return v.type == "户型图";
      });
      uni.navigateTo({
        url:
          "/pages/houseDetail/swiperMedia?mediaList=" +
          encodeURIComponent(JSON.stringify(list.list)) +
          "&all=" +
          encodeURIComponent(JSON.stringify(this.list)),
      });
    }
  }
  videoPlay() {
    this.isActiveVideo = true;
    const videoContext = uni.createVideoContext("videoRef");
    videoContext.play();
  }
  videoPauseCallback() {
    this.isActiveVideo = false;
  }
  videoEndCallback() {
    this.isActiveVideo = false;
  }
}
</script>
<style lang="scss" scoped>
.xjw-swiper {
  position: relative;
  overflow: hidden;
}
.xjw-swiper-item {
  overflow: hidden;
  align-items: center;
  height: 100%;
}
.xjw-list-image-wrap {
  width: 100%;
  height: 100%;
  flex: 1;
  transition: all 0.5s;
  overflow: hidden;
  box-sizing: content-box;
  position: relative;
}
.xjw-swiper_image {
  width: 100%;
  will-change: transform;
  height: 100%;
  display: block;
  /* #ifdef H5 */
  pointer-events: none;
  /* #endif */
}
.video-content {
  position: relative;
  height: 100%;

  .video-content-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
}
.vr-contetn {
  position: absolute;
  top: 146upx;
  left: 50%;
  transform: translate(-50%, 0);
  width: 168upx;
  height: 108upx;
  background: rgba(255, 255, 255, 0.77);
  border-radius: 54upx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: $f303133;
  .vr-contetn_icon {
    font-size: 40upx;
  }
  .vr-contetn_title {
    font-size: 24upx;
  }
}
.xjw-swiper-indicator {
  padding: 0 28upx;
  position: absolute;
  bottom: 28upx;
  display: flex;
  width: 100%;
  z-index: 1;
  box-sizing: border-box;
  .xjw-indicator-item_number {
    padding: 10upx 32upx;
    background: rgba(5, 5, 5, 0.53);
    border-radius: 26upx;
    color: #fff;
    font-size: 28upx;
    .xjw-tupian {
      display: inline-block;
      margin-right: 16upx;
      font-size: 24upx;
    }
  }
}
.xjw-swiper-active-type {
  position: absolute;
  bottom: 28upx;
  display: flex;
  padding: 4upx;
  background: #fff;
  border-radius: 30upx;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  .xjw-swiper-active-type_item {
    width: 105upx;
    font-size: 24upx;
    padding: 14upx 0;
    border-radius: 30upx;
    box-sizing: border-box;
    text-align: center;
    & + .xjw-swiper-active-type_item {
      margin-left: 16upx;
    }
    &.xjw-swiper-active-type_item--actvie {
      background: #f6a420;
      color: #fff;
    }
  }
}
</style>
